<script>

function openRelCa()
{
	$(".bg_transp").show();
	
	$.post("relatorio/gerar", $("#frm_rel").serialize(), function(html){
		$(".ajax-relatorio").html(html).show();
	});
}

function options(idElm, hid)
{
	var id = $("#"+idElm);

	if(id.css("display") == "block")
		id.animate({marginTop: '-5px', opacity: 0}, 300, function(){$(this).hide()});
	else
		id.show().animate({marginTop: '10px', opacity: 0.95}, 300, function(){});
}


$(function(){
	$('.date').datepicker({
		changeMonth: true,
		changeYear: true
	});

	var dates = $('#date_fim, #date_ini').datepicker({
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 3
	});

});
</script>
<style>
#frm_rel select{
	padding: 10px;
}
</style>
<div style="width: 800px; position: relative; margin: 0 auto;">
	<div style="font-size: 22px; color: #FF9900; text-align: left;">
		Relatorio
	</div>
	<hr style="border-top: 1px dashed #FF9900; margin-top: 5px; margin-bottom: 5px;" />
	<div class="ui-corner-all" style="border: 1px solid gray; padding: 10px; padding-top: 5px; margin-top: 10px;">
		<form id="frm_rel" >
			<table width="100%">
				<tr>
					<td>
						<b>Funcionario</b>
					</td>
					<td>
						<b>Tipo Pagamento</b>
					</td>
				</tr>
				<tr>
					<td width="1%">
						<div onclick="options('func');" id="func_titulo"  class="ui-corner-all" style="width: 150px; padding: 10px; border: 1px solid #bececf; background: #f4f4f4; background-image: url('public/images/tablesorter/asc.gif'); background-repeat: no-repeat; background-position: 97%">
							Todos
						</div>
						<div id="func" class="ui-corner-all" style="opacity: 0; width: 170px; display: none; border: 1px solid #bececf; background: #f9f9f9; position: absolute;">
							<?php foreach ($this->func as $k => $v): ?>
							<div onclick="$('#313').val('<?php echo $k; ?>'); return; $('#func_titulo').html('<?php echo $v; ?>'); options('func');" style="padding: 10px 0 10px 10px; border-bottom: 1px dotted #eaeaea;">
								<strong><?php echo $v; ?></strong>
							</div>
							<?php endforeach; ?>
						</div>
						<input type="hidden" name="caf01_cod" id="313" />
					</td>
					<td>
						<div onclick="options('tp');" id="tp_titulo"  class="ui-corner-all" style="width: 150px; padding: 10px; border: 1px solid #bececf; background: #f4f4f4; background-image: url('public/images/tablesorter/asc.gif'); background-repeat: no-repeat; background-position: 97%">
							Todos
						</div>
						<div id="tp" class="ui-corner-all" style="opacity: 0; width: 170px; display: none; border: 1px solid #bececf; background: #f9f9f9; position: absolute;">
							<?php foreach ($this->tp as $k => $v): ?>
							<div onclick="$('#caf11_tipo_pagamento').val('<?php echo $k; ?>'); $('#tp_titulo').html('<?php echo $v; ?>'); options('tp');" style="padding: 10px 0 10px 10px; border-bottom: 1px dotted #eaeaea;">
								<strong><?php echo $v; ?></strong>
							</div>
							<?php endforeach; ?>
						</div>
						<input type="hidden" name="caf11_tipo_pagamento" id="caf11_tipo_pagamento" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<hr />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<b>Data Unica</b>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="text" name="data_unica" id="data_unica" class="date ui-corner-all" style="font-size: 14px; padding: 10px; border: 1px solid gray; width: 150px;" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<hr />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<b>Data Por Periodo</b>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="text" name="data_ini" id="data_ini" class="date ui-corner-all" style="font-size: 14px; padding: 10px; border: 1px solid gray; width: 150px;" value="De" />
						<input type="text" name="data_fim" id="data_fim" class="date ui-corner-all" style="font-size: 14px; padding: 10px; border: 1px solid gray; width: 150px;" value="Ate" />
					</td>
				</tr>
			</table>
			<hr style="margin: 10px 0 10px 0;" />
			
			<div>
				<div id="salvar_btn" class="button ui-corner-all" onclick="openRelCa();" style="text-align: center; float: left; padding: 20px; width: 201px;">
					<b>Gerar Relatorio</b>
				</div>
				<div class="button ui-corner-all" onclick="$('.bt_list_rel').click();" style="text-align: center; padding: 20px; margin-left: 256px; width: 201px;">
					<b>Limpar</b>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="ajax-relatorio"></div>